<template>
  <div class="todoBox">
    <div class="header">
      <div class="header-left">
        <!-- <div>+</div> -->
        <h2>{{ title }}</h2>
      </div>
      <input
        class="header-right"
        placeholder="请输入待做事项"
        v-model.trim="todoData"
        @keyup.enter="thingAdd"
      />

      <!-- <button class="allSelect">全选</button> -->
      <button class="thingAdd" @click="addTodoItem()">添加</button>
      <!-- </div> -->
    </div>
    <div class="top-todo-list" v-if="topTodoList.length > 0">
      <h4>置顶：</h4>
      <!-- todo 置顶图表上下 v-if的隐藏切换 待做 -->
      <todoli
        v-for="(item, index) in topTodoList"
        :item="item"
        :index="index"
        :key="index"
        :nowTime="item.time || ''"
        @top="item.isTop = true"
        @down="item.isTop = false"
        @finished="finshedThing(item)"
        @delete="deleteThing(item)"
      ></todoli>
      <!-- <ul class="todo-list">
        <li class="todo-item" v-for="(item, index) in topTodoList" :key="index">
          <span class="todo-item-content" :class="{ finished: item.isFinished }"
            >{{ index + 1 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
              item.name
            }}</span
          >
          <span class="todo-item-time" :class="{ finished: item.isFinished }">
            {{ nowTime[index] }}</span
          >
          <span class="opera">
            <i class="fa fa-arrow-down" @click.stop="item.isTop = false"></i>
            <i class="fa fa-check" @click.stop="finshedThing(item)"></i>
            <i class="fa fa-trash" @click.stop="deleteThing(item)"></i>
          </span>
        </li>
      </ul> -->
    </div>
    <!-- 普通todo -->
    <ul class="todo-list" v-if="unTopTodoList.length > 0">
      <todoli
        v-for="(item, index) in unTopTodoList"
        :item="item"
        :index="index"
        :key="index"
        :nowTime="item.time"
        @top="item.isTop = true"
        @finished="finshedThing(item)"
        @delete="deleteThing(item)"
      ></todoli>
    </ul>
    <div class="no-todo-listData" v-else>No Data</div>

    <div class="total-events">
      今日事项共&nbsp;&nbsp;{{ todoList.length || 0 }}&nbsp;&nbsp;项
    </div>
    <div class="total-unfinished">
      今日未完成&nbsp;&nbsp;{{ unfinishedNum || 0 }}&nbsp;&nbsp;项
    </div>
    <div class="total-finished">
      今日已完成&nbsp;&nbsp;{{ finishedNum || 0 }}&nbsp;&nbsp;项
    </div>
  </div>
</template>

<script>
import todoli from './todoli.vue'
export default {
  name: 'HelloWorld',
  // --- todo 置顶图表上下 v-if的隐藏切换 待做
  // --- todo  一刷新,时间没有了
  data() {
    return {
      // 标题
      title: 'Todo List',
      // 暂存todo数据
      todoData: '',
      // 记录存储时间
      // nowTime: [],
      // 已完成项数
      // finishedNum:'',
      // 未完成项数
      // unfinishedNum:'',

      // --- todo列表
      todoList: [],
      // 模拟 todoItemId
      todoItemId: 0
    }
  },
  components: { todoli },
  computed: {
    // 完成事项数量
    finishedNum() {
      return this.todoList.filter((item) => item.isFinished).length
    },
    // 未完成事项数量
    unfinishedNum() {
      return this.todoList.filter((item) => !item.isFinished).length
    },
    // 置顶事项数
    topTodoList() {
      return this.todoList.filter((item) => item.isTop)
    },
    // 未置顶事项数
    unTopTodoList() {
      return this.todoList.filter((item) => !item.isTop)
    },
    //-- todoItemIds id数组
    todoItemIds() {
      return this.todoList.map((item) => item.id)
    }
  },
  // 此生命周期一般用于获取数据
  created() {
    // myThis.todoList.splice(0,1,{...}) // 可如此进行页面响应式变化
    // window.myThis = this // 使用测试 myThis即可取出data数据
    // axios去接口获取
    this.todoList = JSON.parse(localStorage.getItem('todoList')) || []
    this.todoItemId = this.todoList.length
  },
  // 可调用nextTick去确保获取到Dom节点
  mounted() {},
  // 清除定时器
  beforeDestory() {},
  // 后续对watch进行todo操作继续监听并更新
  watch: {
    todoList: {
      deep: true,
      handler(to) {
        localStorage.setItem('todoList', JSON.stringify(to))
      }
    }
    // -- todoList(to) {
    //   localStorage.setItem('todoList', JSON.stringify(to))
    // }
  },
  // 当在模板上布上方法时，每次渲染都会调用方法
  // computed调用computed生成函数生成数据
  // 而computed会利用缓存形式，只执行一次，计算量较大时，建议computed
  methods: {
    // 完成事件的回调
    finshedThing(item) {
      // 假如传参为item watch 对 若对象未采用深度监听 不会执行watch方法
      // const origin = this.todoList[index]
      // this.todoList.splice(index, 1, {
      //   name: origin.name,
      //   isFinished: !origin.isFinished,
      //   isTop: false
      // })
      item.isFinished = !item.isFinished
      // localStorage.setItem('todoList', JSON.stringify(this.todoList))
    },
    // 添加待做事件
    addTodoItem() {
      // 去除两端空格trim
      // if (!this.todoData.trim()) {
      if (!this.todoData) {
        alert('todo 不为空')
        return
      }
      let nowItTime = new Date().toLocaleString() //获取日期与时间  "2020/12/14 下午2:11:5
      this.todoList.push({
        id: this.todoItemId,
        name: this.todoData,
        isFinished: false,
        time: nowItTime,
        isTop: false
      })
      this.todoItemId += 1
      // let nowItTime = new Date()
      // nowItTime.toLocaleDateString() //获取当前日期   "2020/12/14"
      // nowItTime.toLocaleTimeString() //获取当前时间  "下午2:11:54"
      // this.nowTime.push(nowItTime)
      // v-model双向绑定
      // 输完提交后，置空
      this.todoData = ''

      // localStorage.setItem('todoList', JSON.stringify(this.todoList))
    },
    // 删除待做事件
    deleteThing(item) {
      const { id } = item
      // let index = 0
      // this.todoList.forEach((it, i) => {
      //   if (it.id == id) {
      //     index = i
      //   }
      // })
      let index = this.todoItemIds.indexOf(id)
      this.todoList.splice(index, 1)
      // localStorage.setItem('todoList', JSON.stringify(this.todoList))
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.todoBox {
  width: 600px;
  height: 600px;
  position: absolute;
  // top: 50%;
  left: 50%;
  transform: translate(-50%);
  // background-color: #3c3e4f;
  background: linear-gradient(to bottom right, #3c3e4f, #48aef0);
  box-shadow: 6px 2px 5px rgba(0, 0, 0, 0.2);
  color: #fff;
  .header {
    display: inline-block;
    display: flex;
    // justify-content: center;
    align-items: center;
    height: 80px;
    line-height: 80px;
    border: 1px solid #fff;
    .header-left {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-left: 50px;
      div {
        font-size: 30px;
        height: 50px;
        border-radius: 50%;
        background-color: #9999e6;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 0 20px 0 -40px;
      }
    }
    .header-right {
      padding: 0px 15px;
      margin: 0 20px;
      height: 40px;
      width: 300px;
      outline: none;
      border: none;
      border-radius: 4px;
      font-size: 16px;
    }
  }
  button {
    padding: 5px 10px;
    // border: none;
    // outline: ;
    border-radius: 4px;
    margin-left: 5px;
    color: #fff;
    &:active {
      box-shadow: -2px -2px 2px #ccc inset;
    }
  }
  .allSelect {
    background-color: #c43f38;
  }
  .thingAdd {
    background-color: #70b918;
    cursor: pointer;
  }
  .todo-list {
    // height: 500px;
    // background-color: pink;
    margin-top: 20px;
    list-style: none;
  }
  .top-todo-list {
    margin-top: 20px;
    list-style: none;
    border-bottom: 2px solid #ccc;
    .todo-item {
      display: flex;
      margin: 20px 20px;
      width: 96%;
      justify-content: space-between;
      align-items: center;
      background-color: #fff !important;
      font-size: 16px;
      border-radius: 4px;
      line-height: 36px;
      // #de4c4c #c43f38
      border: 2px solid #de4c4c;
      color: #111;
      .todo-item-content {
        margin-left: 40px;
        width: 365px;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .todo-item-time {
        white-space: nowrap;
        margin-right: 40px;
      }
      .opera {
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
          margin-right: 10px;
          font-size: 18px;
          &:last-child {
            color: red;
            margin: 0 20px 0;
          }
        }
      }
    }
  }
  .no-todo-listData {
    margin-top: 50px;
    text-align: center;
    font-size: 14px;

    color: #ccc;
  }
  .total-events {
    margin-top: 50px;
    // float: right;
    margin-right: 50px;
    // transform: translateX(50%);
    text-align: right;
  }
  .total-unfinished,
  .total-finished {
    margin-top: 10px;
    text-align: center;
  }
  .finished {
    text-decoration: line-through #2f4f4f;
  }
}
</style>
